<template>
    <div class="article-lists">
        <el-card class="!border-none" shadow="never">

            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="代理人账号">
                    <el-input
                        class="w-[280px]"
                        v-model="queryParams.account"
                        clearable
                        @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none" shadow="never">
            <el-button type="primary" class="mb-4" @click="onSign">
                报名费设置
            </el-button>
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="单号" min-width="220" prop="sn"/>
                <el-table-column label="代理人账号" min-width="180" prop="account">
                    <template #default="{row}">
                        <span class="txt">{{ row.account }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="代理人用户名" min-width="180" prop="real_name"/>
                <el-table-column label="报名费" min-width="180" prop="actual_money"/>
                <el-table-column label="支付方式" prop="pay_type" min-width="180">
                    <template #default="{ row }">
                        <span v-if="row.pay_type == 0">-</span>
                        <span v-if="row.pay_type == 1">微信</span>
                        <span v-if="row.pay_type == 2">支付宝</span>
                        <span v-if="row.pay_type == 3">对公支付</span>
                        <span v-if="row.pay_type == 4">钱包</span>
                    </template>
                </el-table-column>
                <el-table-column label="支付时间" min-width="190" prop="pay_time"/>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button v-if="row.status == 1" type="primary" link @click="back_money(row)">退款</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <el-dialog
                v-model="showIcon"
                title="报名费设置"
                width="800"
                @close="handleDiaClose"
        >
            <el-form
                ref="formRef"
                :model="formData"
                :rules="rules"
                label-width="180"
                require-asterisk-position="right"
            >
                <el-form-item label="背景图" prop="bg_img">
					<div class="w-80">
						<div>
							<material-picker v-model="formData.bg_img" :limit="1"/>
						</div>
					</div>
				</el-form-item>
                <el-form-item label="报名费" prop="total_price">
                    <div class="w-80">
                        <el-input
                            v-model="formData.total_price"
                            placeholder="请输入报名费"
                            type="number"
                            maxlength="15"
                            clearable
                        />
                    </div>
                </el-form-item>
                <el-form-item label="优惠金额" prop="discount_price">
                    <div class="w-80">
                        <el-input
                            v-model="formData.discount_price"
                            placeholder="请输入优惠金额"
                            type="number"
                            maxlength="15"
                            clearable
                        />
                    </div>
                </el-form-item>
                <el-form-item label="实际支付" prop="real_price">
                    <div class="w-80">
                        <el-input
                            v-model="formData.real_price"
                            placeholder="请输入实际支付"
                            type="text"
                            maxlength="15"
                            clearable
                        />
                    </div>
                </el-form-item>
                <el-form-item label="分账详情：" prop="real_price">
                    <div class="w-80">平台会根据实际支付的金额进行分账, 下面四个收益相加要等于实际支付金额</div>
                </el-form-item>
                <el-form-item label="金牌/银牌代理人直邀收益" prop="invite_price">
                    <div class="w-80">
                        <el-input
                            v-model="formData.invite_price"
                            placeholder="请输入直邀收益"
                            type="number"
                            maxlength="15"
                            clearable
                        />
                    </div>
                </el-form-item>
                <el-form-item label="金牌代理人间邀收益" prop="indirect_price">
                    <div class="w-80">
                        <el-input
                            v-model="formData.indirect_price"
                            placeholder="请输入间邀收益"
                            type="number"
                            maxlength="15"
                            clearable
                        />
                    </div>
                </el-form-item>
                <el-form-item label="城市合伙人收益" prop="city_price">
                    <div class="w-80">
                        <el-input
                            v-model="formData.city_price"
                            placeholder="请输入城市合伙人收益"
                            type="number"
                            maxlength="15"
                            clearable
                        />
                    </div>
                </el-form-item>
                <el-form-item label="平台获得收益" prop="platform_price">
                    <div class="w-80">
                        <el-input
                            v-model="formData.platform_price"
                            placeholder="请输入平台获得收益"
                            type="text"
                            maxlength="15"
                            clearable

                        />
                    </div>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleDiaClose">取消</el-button>
                    <el-button v-perms="['user.agent/setBondConfig']" type="primary" @click="onSubmit" :loading="loading">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup name="order">
import { bondOrderList, getBondConfig, setBondConfig, backMoney} from '@/api/agent'
import { usePaging } from '@/hooks/usePaging'
import Popup from '@/components/popup/index.vue'
import type {FormInstance} from 'element-plus';
import feedback from '@/utils/feedback'
const formRef = shallowRef<FormInstance>()
const showIcon = ref(false);
const queryParams = reactive({
    keys: '',
    account: '',
    status: '',
    agent_group_id: ''
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: bondOrderList,
    params: queryParams
})
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const onSign = () => {
    showIcon.value = true;
}
const handleConfirm = () => {
    console.log('确认报名费')
}

onActivated(() => {
    getLists()
})

getLists()

const formData:any = reactive({
    id: '',
    total_price: '',
    bg_img: '',
    discount_price: '',
    real_price: '',
    invite_price: '',
    indirect_price: '',
    city_price: '',
    platform_price: ''
})
const rules = reactive({
    total_price: [{required: true, message: '请输入报名费', trigger: 'blur'}],
    bg_img: [{required: true, message: '请选择代理人背景图', trigger: 'blur'}],
})
const getConfig = async () => {
    const res = await getBondConfig({})
    console.log(res)
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = res.info[key]
    })
}
getConfig()

const handleDiaClose = () => {
    showIcon.value = false;
    setTimeout(function () {
        formRef.value?.clearValidate();//消除校验,这里的setTimeOut不能去掉,去掉之后会不生效
        formRef.value?.resetFields();
    },30);
}
const loading = ref(false)
const onSubmit = async() => {
    try{
        await formRef.value?.validate()
        // 报名费不能小于优惠金额
        if (formData.total_price <= formData.discount_price) {
            feedback.msgError('报名费不能小于或等于优惠金额')
            return false;
        }
        console.log(formData.total_price)
        console.log(formData.discount_price)
        loading.value = true;
        console.log(formData)
        await setBondConfig(formData)
        loading.value = false;
        showIcon.value = false;
        getConfig()
    }catch(error){
        console.log(error)
    }
}

const back_money = async (row:any) => {
    console.log(row)
    try {
        await feedback.confirm('确定要退款？')
        console.log('1111')
        await backMoney({
            id: row.id
        })
        getLists()
    } catch (error) {
        console.log(error)
    }
}

</script>
<style lang="scss" scoped>
.txt{
    color: var(--el-color-primary);
}
</style>